<template>
  <ui5-li-custom :data-key="props.datakey" :selected="selected">
    <div class="li-content">
      <span class="li-content-text"
        >{{ props.todo.text }} - finish before: {{ props.todo.deadline }}</span
      >
      <div class="li-content-actions">
        <ui5-button class="edit-btn" @click="onEditPress">Edit</ui5-button>
        <ui5-button design="Negative" @click="onDeletePress">Delete</ui5-button>
      </div>
    </div>
  </ui5-li-custom>
</template>

<script setup lang="ts">
  import '@ui5/webcomponents/dist/ListItemCustom';
  import { computed } from 'vue';

  interface Todo {
    id: string | number;
    text: string;
    deadline: string;
    done: boolean;
  }

  const props = defineProps<{ todo: Todo; datakey: string | number }>();
  const emit = defineEmits<{
    (e: 'item-edit', payload: { id: string | number }): void;
    (e: 'item-deleted', payload: { id: string | number }): void;
  }>();

  const selected = computed(() => props.todo.done || undefined);

  function onEditPress() {
    emit('item-edit', { id: props.todo.id });
  }
  function onDeletePress() {
    emit('item-deleted', { id: props.todo.id });
  }
</script>

<style></style>
